<template>
  <h1>{{ number }}</h1>
  <button @click="number++">点我加1~</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const number = ref(0)

    // watch(被监听的数据, 回调函数)
    watch(number, (newVal, oldVal) => {
      console.log('number发生了变化，模拟发个请求....', { newVal, oldVal })
    })

    return { number }
  },
  // Vue2 写法
  // watch: {
  //   number(newVal, oldVal) {
  //     console.log('number发生了变化，模拟发个请求....', { newVal, oldVal })
  //   },
  // },
}
</script>

<style></style>
